<!-- 应用程序主组件 - 整个Vue应用的根组件，包含路由视图和全局配置 -->
<script setup lang="ts">
import { computed, h } from 'vue'
import { useRoute, RouterView } from 'vue-router'
import PageLayoutH from './components/PageLayoutH.vue' // 导入页面水平布局组件

// 获取当前路由信息
const route = useRoute()

// 根据路由元信息计算当前应使用的布局组件
const layoutComponent = computed(() => {
  // 从路由元信息中获取布局类型，默认为null（无布局包裹）
  const layoutType = route.meta.layout
  
  // 根据布局类型返回相应的布局组件
  if (layoutType === 'PageLayoutH') {
    return PageLayoutH
  }
  
  // 如果没有指定布局类型，则直接返回null，后续会直接渲染页面内容
  return null
})

// 渲染函数：根据布局类型动态渲染页面
const renderContent = () => {
  // 如果指定了布局组件
  if (layoutComponent.value) {
    // 使用h函数渲染布局组件，传递页面标题和主内容
    return h(layoutComponent.value, {
      // 传递props或使用slots
    }, {
      // 定义布局组件的插槽内容
      TITLE: () => h('h1', route.meta.title || '应用标题'), // 页面标题插槽
      MAIN: () => h(RouterView) // 主内容区域插槽，渲染实际页面
    })
  }
  
  // 如果没有指定布局组件，则直接渲染路由视图
  return h(RouterView)
}
</script>

<template>
  <div id="app">
    <!-- 使用renderContent函数动态渲染内容 -->
    <component :is="renderContent" />
  </div>
</template>

<style>
/* 全局样式重置 - 清除浏览器默认样式 */
* {
  margin: 0;                    /* 清除所有元素的外边距 */
  padding: 0;                   /* 清除所有元素的内边距 */
  box-sizing: border-box;      /* 设置盒模型为border-box，包含padding和border在width/height内 */




  //-webkit-user-select: none; /* Chrome, Safari：WebKit内核浏览器的私有前缀 */
  //-moz-user-select: none;    /* Firefox：Mozilla浏览器的私有前缀 */
  //-ms-user-select: none;     /* IE/Edge：微软浏览器的私有前缀 */
  //user-select: none;        /* 标准语法：完全禁止用户选择文本，符合CSS规范 */
  //-webkit-touch-callout: none; /* 禁止长按弹出菜单：移动端长按不会弹出复制/粘贴菜单 */







  /*隐藏滚动条的基础样式 - 应用到所有元素 */
  -ms-overflow-style: none; /* IE/Edge */
  overflow: -moz-scrollbars-none; /* Firefox滚动条隐藏 */
  /* 标准滚动条隐藏属性，支持Chrome 121+, Edge 121+, Firefox 64+ */
  scrollbar-width: none; /* 标准语法 */
  /* Webkit内核浏览器的滚动条隐藏属性 */
  -webkit-scrollbar-width: none; /* 新版Chrome/Safari */

 

}
  
  /* 为所有元素定义Webkit滚动条样式 */
  *::-webkit-scrollbar {
    display: none;  /* 隐藏所有元素的滚动条 */
  }
  


/* 已在*选择器中设置全局滚动条隐藏，此处保留注释说明 */










/* 页面主体样式 - 设置全局字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* 字体栈优先级：
   * -apple-system: iOS/macOS系统字体
   * BlinkMacSystemFont: Chrome macOS系统字体
   * Segoe UI: Windows系统字体
   * Roboto: Android系统字体
   * Helvetica Neue: macOS备用字体
   * Arial: 通用备用字体
   * sans-serif: 最终备用无衬线字体
   */
}








/* 应用根容器样式 */
#app {
  width: 100%;                  /* 占满整个视口宽度 */
  min-height: 100vh;           /* 最小高度为视口高度，确保页面至少占满一屏 */
  /* 注意：这里可以添加更多全局样式，如背景色、溢出处理等 */
}
</style>
